<template>
    <div class="login-container">
        <!-- ref相当于id，:model表单数据对象，label-width表单域标签的宽度 -->
        <el-form :model="form" label-width="80px" class="login-form" ref="ruleFormRef" :rules="rules">
            <h2 class="login-title">登录</h2>
            <el-form-item label="账号" prop="username">
                <el-input v-model="form.username" placeholder="请输入账号"></el-input>
            </el-form-item>
            <el-form-item label="密码" prop="password">
                <el-input v-model="form.password" placeholder="请输入密码" type="password"></el-input>
            </el-form-item>
            <el-form-item>
                <el-button type="primary" @click="onSubmit(ruleFormRef)">登录</el-button>
                <!-- <el-button>注册</el-button> -->
            </el-form-item>
        </el-form>
    </div>
</template>
<script setup lang="ts">
import { reactive, ref } from 'vue';
import type { FormInstance, FormRules } from 'element-plus'
import { useRouter } from 'vue-router'
let $router = useRouter()
// 引入用户小仓库
import useUserStore from '@/store/modules/user'
let useStore = useUserStore()

// 消息提示组件
import { ElMessage } from 'element-plus'
// 收集表单数据对象
const form = reactive({
    username: '',
    password: '',
})
// 表单元素对象，需要和el-form的ref属性值对应
const ruleFormRef = ref<FormInstance>()
// 自定义校验规则
const validateUserName = (_rule:any,value:any,callback:any)=>{
    value = value.trim()
    const length = value && value.length
    const pwdReg = /^[a-zA-Z0-9_]+$/
    if (value === ""){
        callback(new Error("请输入账号"))
    }else if(length<4||length>12){
        callback(new Error("长度在4到12个字符之间"))
    }else if(!pwdReg.test(value)){
        callback(new Error("账号必须是英文，数字或下划线组成"))
    }else{
        callback()
    }
}
// 表单校验规则
const rules = reactive<FormRules>({
    username:[
        {
            required:true,
            validator: validateUserName,
            trigger: ['blur','change'],
        },
    ],
    password:[
        {
            required:true,
            message:"请输入密码",
            trigger: ['blur','change'],
        },
    ],
})
// 登录按钮点击回调
const onSubmit = (formEl: FormInstance | undefined) => {
    if(!formEl) return
    formEl.validate(async(valid) => {
        if(valid){
            try{
                await useStore.userLogin(form)
                $router.push("/")
                ElMessage({
                    type:"success",
                    message:"登录成功"
                })
            }catch(error){
                ElMessage({
                    type:"error",
                    message:(error as Error).message
                })
            }
        }else{
            console.log('error submit!');
        }
    })
}
</script>

<style scoped>
body{
    margin: 0 !important;
    padding: 0 !important;
    border: none;
}
.login-form{
    width: 350px;
    margin: 160px auto;
    background-color: rgb(255, 255, 255,0.8);
    padding: 30px;
    border-radius: 20px;
}
.login-container{
    position: absolute;
    width: 100%;
    height: 100%;
    background: url(../../assets/bg.jpg) no-repeat;
    background-size: cover;
    overflow: hidden;
}
.login-title{
    text-align: center;
    color: #303133;
}
</style>